<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">

      <el-col :span="1.5" v-if="btnShow">
        <el-button
          type="primary"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="examineApply"
        >{{ $t("toExamine") }}
        </el-button>
      </el-col>

      <el-col :span="1.5" v-if="btnShow">
        <el-button
          type="primary"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="followUpApply"
        >跟进
        </el-button>
      </el-col>

      <el-col :span="1.5" v-if="withdrawalBtnShow">
        <el-button
          type="primary"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="addWithdrawalLog"
        >提现备注
        </el-button>
      </el-col>

      <el-col :span="1.5" v-if="overBtnShow">
        <el-button
          type="primary"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="addOverLog"
        >催收备注
        </el-button>
      </el-col>
    </el-row>

    <el-tabs v-model="activeTab" type="card" @tab-click="handleApply">
      <el-tab-pane :label="$t('basicInformation')" name="jcxx">
        <basics ref="basics"></basics>
      </el-tab-pane>

      <el-tab-pane :label="$t('operators')" name="yys">
        <operator ref="operator"></operator>
      </el-tab-pane>

      <el-tab-pane :label="$t('loanRecord')" name="dkjl">
        <apply-log ref="applyLog"></apply-log>
      </el-tab-pane>

      <el-tab-pane :label="$t('bondDetails')" name="gzmx">
        <public-detail ref="publicDetail"></public-detail>
      </el-tab-pane>

      <el-tab-pane :label="$t('auditRecords')" name="shjl">
        <examine-log ref="examineLog"></examine-log>
      </el-tab-pane>

      <el-tab-pane :label="$t('collectionRecord')" name="csjl">
        <over-log ref="overLog"></over-log>
      </el-tab-pane>
    </el-tabs>

    <el-dialog :title="$t('addOverLog')" :visible.sync="open" width="600px">
      <el-form ref="form2" :model="form2" :rules="rules2" label-width="120px">
        <el-form-item :label="$t('details')" prop="detail">
          <el-input v-model="form2.detail"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitWithdrawalLogHandler">{{ $t('confirm') }}</el-button>
        <el-button @click="open = false">{{ $t('cancel') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="$t('toExamine')" :visible.sync="examineOpen" width="600px">
      <el-form ref="form" :model="form" :rules="rules2" label-width="120px">

        <el-form-item :label="$t('product')" prop="productId" v-if="twoExamineType">
          <el-select v-model="form.productId" clearable :placeholder="$t('pleaseSelect')" @change="tplSelectChange">
            <el-option
              v-for="item in applyProductList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
              {{ item.applyMoney }} - {{ item.realApplyMoney }}
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('loanLimit')" v-if="twoExamineType">
          <el-input v-model="applyInfo.realApplyMoney" disabled/>
        </el-form-item>

        <el-form-item :label="$t('cycle')" v-if="twoExamineType">
          <el-input v-model="applyInfo.applyCycle" disabled>
            <template slot="append">{{ $t('day') }}</template>
          </el-input>
        </el-form-item>

        <el-form-item :label="$t('manageFee')" v-if="twoExamineType">
          <el-input v-model="applyInfo.manageMoney" disabled/>
        </el-form-item>

        <el-form-item :label="$t('serviceFee')" v-if="twoExamineType">
          <el-input v-model="applyInfo.serviceMoney" disabled/>
        </el-form-item>

        <el-form-item :label="$t('examineFee')" v-if="twoExamineType">
          <el-input v-model="applyInfo.riskMoney" disabled/>
        </el-form-item>

        <el-form-item :label="$t('dayRate')" v-if="twoExamineType">
          <el-input v-model="applyInfo.dayRate" disabled>
            <template slot="append">%</template>
          </el-input>
        </el-form-item>

        <!--        <el-form-item :label="$t('actualAmount')" v-if="twoExamineType">-->
        <!--          <el-input v-model="applyInfo.receiptMoney" disabled/>-->
        <!--        </el-form-item>-->

        <el-form-item :label="$t('overRate')" v-if="twoExamineType">
          <el-input v-model="applyInfo.expireRate" disabled>
            <template slot="append">%</template>
          </el-input>
        </el-form-item>

        <el-form-item :label="$t('frozen')" prop="frozenDay">
          <el-input v-model="form.frozenDay" onkeyup="this.value=this.value.replace(/\D/g,'')">
            <template slot="append">{{ $t('day') }}</template>
          </el-input>
        </el-form-item>

        <el-form-item :label="$t('remarks')" prop="remark">
          <el-input type="textarea" :rows="3" v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="examinePassHandler">{{ $t('examineStatus.pass') }}</el-button>
        <el-button type="danger" @click="examineFailHandler">{{ $t('examineStatus.refuse') }}</el-button>
        <el-button @click="examineOpen = false">{{ $t('cancel') }}</el-button>
      </div>
    </el-dialog>

    <!-- 催收备注 -->
    <el-dialog :title="$t('addOverLog')" :visible.sync="overOpen" width="600px">
      <el-form ref="form1" :model="form1" :rules="rules2" label-width="120px">
        <el-form-item :label="$t('remarks')" prop="remark">
          <el-select v-model="form1.remark" :placeholder="$t('pleaseSelect')" clearable>
            <el-option
              v-for="dict in dict.type.over_des"
              :key="dict.label"
              :label="checkName(dict.label)"
              :value="dict.label"
            />
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('details')" prop="detail">
          <el-input v-model="form1.detail"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitOverLogHandler">{{ $t('confirm') }}</el-button>
        <el-button @click="overOpen = false">{{ $t('cancel') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog title="跟进" :visible.sync="followUpOpen" width="600px">
      <el-form ref="form3" :model="form3" :rules="rules2" label-width="120px">

        <el-form-item :label="$t('details')" prop="followUpRemark">
          <el-input v-model="form3.followUpRemark"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFollowUpRemarkHandler">{{ $t('confirm') }}</el-button>
        <el-button @click="followUpOpen = false">{{ $t('cancel') }}</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
import {
  addOverLogForm,
  applyInfo, examineApply,
  saveFollowUpRemarkById
} from "@/api/app/apply/index";


import Basics from "./basics"
import Operator from "./operator"
import ApplyLog from "./applyLog"
import PublicDetail from "./publicDetail";
import ExamineLog from "./examineLog";
import OverLog from "./overLog";
import {listProduct} from "@/api/app/product";

export default {
  dicts: ['over_des'],
  name: 'Info',
  components: {
    Basics,
    Operator,
    ApplyLog,
    PublicDetail,
    ExamineLog,
    OverLog
  },
  data() {
    return {
      isAdmin: this.$store.state.user.id == 1,
      withdrawalBtnShow: false,
      btnShow: false,
      overBtnShow: false,
      twoExamineType: false,
      overOpen: false,
      examineOpen: false,
      followUpOpen: false,
      open: false,
      activeTab: 'jcxx',
      applyProductList: null,
      applyInfo: {},
      form2: {},
      form1: {},
      form: {},
      form3: {},
      rules2: {
        // remark: [
        //   {required: true, message: "params is not null", trigger: "blur"},
        // ],
        productId: [
          {required: true, message: this.$t('pleaseSelect'), trigger: "blur"},
        ],
        followUpRemark: [
          {required: true, message: "params is not null", trigger: "blur"},
        ]
      }
    };
  },
  created() {
    if (this.$route.params.applyId && this.$route.params.applyId != 0) {
      this.getApplyInfo(this.$route.params.applyId, this.$route.params.userId);
    }

  },
  methods: {
    //获取订单详情
    getApplyInfo(id, userId) {
      applyInfo({id: id, userId: userId}).then(response => {
          if (response.data.status == '4') {
            this.withdrawalBtnShow = true;
          } else {
            this.withdrawalBtnShow = false;
          }

          if (response.data.status == '0' || response.data.status == '2') {
            this.btnShow = true;
            if (response.data.status == "2") {
              // this.examineApply();
              this.twoExamineType = true;
            }
          }

          if (response.data && (response.data.status == '8' || (response.data.status == '6' && this.compare(response.data.repaymentTime)))) {
            this.overBtnShow = true;
          }
        }
      );
    },

    tplSelectChange(value) {
      this.applyProductList.forEach(item => {
        if (item.id == value) {
          this.applyInfo = item;
        }
      })
    },

    examineApply() {
      this.reset();
      listProduct().then(response => {
        this.applyProductList = response.data
      })
      this.examineOpen = true;
    },

    followUpApply(){
      this.reset();
      this.followUpOpen = true;
    },

    //添加催收记录
    addWithdrawalLog() {
      this.reset();
      this.open = true;
    },

    reset() {
      this.form2 = {
        id: this.$route.params.applyId,
        detail: undefined,
      }
      this.form = {
        id: this.$route.params.applyId,
        remark: undefined,
        productId: undefined,
        status: undefined,
        frozenDay: 0,
      }
      this.form1 = {
        id: this.$route.params.applyId,
        remark: undefined,
        detail: undefined,
      }
      this.form3 = {
        id: this.$route.params.applyId,
        followUpRemark: undefined
      }
    },

    //跟进
    submitFollowUpRemarkHandler(){
      this.$refs["form3"].validate(valid => {
        if (valid) {
          saveFollowUpRemarkById(this.form3).then(response => {
            if (!this.twoExamineType) {
              const obj = {path: "/examine/firstIndex", query: this.$route.query};
              this.$tab.closeOpenPage(obj);
            } else {
              const obj = {path: "/examine/twoIndex", query: this.$route.query};
              this.$tab.closeOpenPage(obj);
            }
          })
        }
      })
    },

    examinePassHandler() {
      this.form.status = '1';
      this.$refs["form"].validate(valid => {
        if (valid) {
          examineApply(this.form).then(response => {
            if (!this.twoExamineType) {
              const obj = {path: "/examine/firstIndex", query: this.$route.query};
              this.$tab.closeOpenPage(obj);
            } else {
              const obj = {path: "/examine/twoIndex", query: this.$route.query};
              this.$tab.closeOpenPage(obj);
            }
          })
        }
      })
    },

    examineFailHandler() {
      this.form.status = '2';
      this.$refs["form"].validate(valid => {
        examineApply(this.form).then(response => {
          if (!this.twoExamineType) {
            const obj = {path: "/examine/firstIndex", query: this.$route.query};
            this.$tab.closeOpenPage(obj);
          } else {
            const obj = {path: "/examine/twoIndex", query: this.$route.query};
            this.$tab.closeOpenPage(obj);
          }
        })
      })
    },

    handleApply(tab, event) {
      if (tab.name == 'jcxx') {
        this.$refs.basics.getInfo(this.$route.params.userId, this.$route.params.applyId);
      } else if (tab.name == 'yys') {
        this.$refs.operator.getOperatorLog(this.$route.params.userId);
      } else if (tab.name == 'dkjl') {
        this.$refs.applyLog.getList(this.$route.params.userId);
        this.$refs.applyLog.getCompanyDetailByUserId();
      } else if (tab.name == 'gzmx') {
        this.$refs.publicDetail.getApplyLogList(this.$route.params.userId);
        this.$refs.publicDetail.getCompanyDetailByUserId();
      } else if (tab.name == 'shjl') {
        this.$refs.examineLog.getExamineLogList(this.$route.params.userId);
        // this.$refs.examineLog.getApplyInfo(this.$route.params.applyId, this.$route.params.userId);
      } else if (tab.name == 'csjl') {
        this.$refs.overLog.getOverLogList(this.$route.params.userId);
        // this.$refs.overLog.getApplyInfo(this.$route.params.applyId, this.$route.params.userId);
      }
    },

    //保存提现备注
    submitWithdrawalLogHandler() {
      this.$refs["form2"].validate(valid => {
        if (valid) {
          addOverLogForm(this.form2).then(response => {
            const obj = {path: "/examine/waitWithdrawal", query: this.$route.query};
            this.$tab.closeOpenPage(obj);
          });
        }
      })
    },

    checkName(name) {
      if (this.$te('overResult.' + name)) {
        return this.$t('overResult.' + name)
      }
      return name;
    },

    //添加催收记录
    addOverLog() {
      this.reset();
      this.overOpen = true;
    },

    //保存催收记录
    submitOverLogHandler() {
      this.$refs["form1"].validate(valid => {
        if (valid) {
          addOverLogForm(this.form1).then(response => {
            this.$modal.msgSuccess("success");
            this.overOpen = false;
            this.getOverLogList(this.$route.params.userId);
          });
        }
      })
    },
    compare(date) {
      let time1 = new Date(date).getTime();
      let day = new Date().getDate();
      let time2 = new Date().setDate(day + 1);
      return time1 <= time2;
    },
  },


};
</script>
<style lang="scss" scoped>
.cardTitle {
  font-size: 16px;
  font-weight: 600;
}

.info {
  line-height: 36px;
}
</style>
